<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/js/jquery-3.7.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <style>
        * {
            /* 设置盒子模型 */
            box-sizing: content-box;
        }

        body {
            background-color: lightgrey;
            background-size: 100%;
            margin: 0;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-family: "阿里妈妈刀隶体 Regular", sans-serif;
            font-weight: 300;
        }

        .login-div {
            /* 设置图像模糊 */
            filter: blur(0.4px);
            width: 430px;
            height: 700px;
            padding: 60px 35px 35px 35px;
            border-radius: 10px;
            background: radial-gradient(circle, #555555d4, #535353d4, #505050d4, #4e4e4ed4, #4c4c4cd4);
            box-shadow:
                /* x轴  y轴  模糊半径  颜色 */
                    0px 20px 20px rgba(0, 0, 0, 0.2),
                    0px 5px 10px rgba(0, 0, 0, 0.2),
                    0px 70px 50px rgba(0, 0, 0, 0.4),
                    30px 50px 50px rgba(0, 0, 0, 0.2),
                    -30px 50px 50px rgba(0, 0, 0, 0.2),
                    inset 20px 0px 60px rgba(0, 0, 0, 0.1),
                    inset -20px 0px 60px rgba(0, 0, 0, 0.1);


        }

        .title {
            font-family: '阿里妈妈刀隶体 Regular';
            text-align: center;
            font-size: 28px;
            font-weight: normal;
            padding-top: 24px;
            letter-spacing: 2px;
        }

        .sub-title {
            font-family: '宋体';
            text-align: center;
            font-size: 15px;
            padding-top: 7px;
            letter-spacing: 3px;
            text-transform: uppercase;
            font-weight: bold;
        }

        .fields {
            width: 100%;
            padding: 100px 5px 30px 5px;
        }

        .fields input {
            border: none;
            outline: none;
            background: none;
            font-size: 18px;
            font-family: '微软雅黑', sans-serif;
            color: white;
            padding: 10px 10px 10px 5px;
        }

        .username,
        .password {
            display: block;
            border-bottom: 1px solid #b3b3b3;
            margin-bottom: 30px;
        }

        ::placeholder {
            color: white;
            opacity: 1;
            font-size: 20px;
            font-weight: 300;
        }

        .signin-button {
            outline: none;
            border: none;
            cursor: pointer;
            width: 100%;
            height: 60px;
            border-radius: 5px;
            font-size: 22px;
            font-family: '阿里妈妈刀隶体 Regular', sans-serif;
            color: white;
            text-align: center;
            letter-spacing: 1px;
            background: radial-gradient(circle, #24cfaa, #26c5a3, #28bb9c, #2aa88d);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }

        .signin-button:hover {
            background: radial-gradient(circle, #2fdbb6, #32d6b3, #32c9a8, #36c7a7, #38bb9f);
        }

        .signin-button:active {
            background: radial-gradient(circle, #1da88a, #1ea084, #229c82, #23947b, #238d76);
        }

        .link {
            padding-top: 20px;
            text-align: center;
        }

        .link a {
            font-family: "宋体";
            font-weight: normal;
            text-decoration: none;
            color: white;
            font-size: 20px;
        }
    </style>

</head>
<body>

<!-- 最外层盒子 -->
<div class="login-div">
    <!-- 头像 -->
    <div class="logo"></div>
    <!-- 主标题 -->
    <div class="title">学生信息管理系统</div>
    <!-- 副标题 -->
    <div style="height: 10px"></div>
    <div class="sub-title">欢迎登录</div>
    <!-- 用户名密码输入 -->
    <div class="fields">
        <div class="username"><input type="text" class="user-input"
                                                                     placeholder="用户名" id="username" name="username">
        </div>
        <div class="password"><input type="password" class="pass-input"
                                                                     id="password" name="password" placeholder="密码">
        </div>
    </div>
    <!-- 登录按钮 -->
    <button class="signin-button" onclick="login();">登录</button>
    <!-- 忘记密码 -->
    <div class="link"><a href="#">忘记密码?</a></div>
</div>

<script type="text/javascript">
    //用户登录
    function login(){
        var name=$("#username").val();
        var password=$("#password").val();

        $.ajax({
            url:"/webapi/login/user",
            data:{
                username:name,
                password:password
            }
        }).done(function (rs){
            if(rs>=0){
            //     成功

                window.location.href="/student/list";

            }else {
                alert("出错了，您的用户名和密码是乱写的吗？");
            }
        });

    }
</script>
</body>
</html>